<template>
  <div class="pcMenu">
    <QueryForm
      ref="conditionForm"
      module="pcMenu"
      :searchBtnLoading="loading"
      v-model:searchForm="searchForm"
      v-model:search-column="searchColumn"
      @handle-search="onSearch"
    />
    <div class="common-box">
      <el-row style="height: 40px" class="con-button-rows">
        <ButtonGroup
          :disabledDelete="multipleSelection.length != 1"
          :disabledEdit="multipleSelection.length != 1"
          :hasPermiAdd="['system:menu:add']"
          :hasPermiDelete="['system:menu:delete']"
          :hasPermiEdit="['system:menu:edit']"
          @add="onAdd"
          @edit="onEdit"
          @delete="onDelete"
        ></ButtonGroup>
      </el-row>
      <MyTable
        tableId="pcMenu"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :treeConfig="{
          rowField: 'menuId',
          childrenField: 'children',
          showIcon: true,
          lazy: true,
          hasChildField: 'hasChildren',
          loadMethod: loadMethod,
        }"
        :checkStrictly="true"
        ref="commonTable"
        moduleName="pcMenu"
        class="common-table"
        @handleSelectionChange="handleSelectionChange"
      ></MyTable>
    </div>
    <Add
      v-if="dialogVisible"
      v-model:visible="dialogVisible"
      :currRow="currRow"
      :isType="isType"
      @onSubmit="onSearch"
    ></Add>
  </div>
</template>

<script setup lang='tsx'>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
import Add from "./components/Add.vue";
import * as api from "@/api/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { hasPermi } from "@/utils/mUtils.js";
let { t } = useI18n();
defineOptions({
  name: "PcMenu",
});
const loading = ref(false);
const dataSource = ref([]);
const columns = ref([
  {
    type: "checkbox",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    title: "序号",
    type: "seq",
    width: 60,
    fixed: "left",
  },
  {
    field: "menuName",
    title: "菜单名称",
    treeNode: true,
  },
  {
    field: "perms",
    title: "权限标识",
  },
  {
    field: "path",
    title: "路由名称",
  },
  {
    field: "menuType",
    title: "类型",
    slots: {
      default: ({ row }) => {
        const obj = {
          M: {
            label: "目录",
            type: "success",
          },
          C: {
            label: "菜单",
            type: "warning",
          },
          F: {
            label: "按钮",
            type: "danger",
          },
        };
        return [
          <el-tag
            type={obj[row.menuType].type}
            effect="plain"
            round
            style="width: 60px"
          >
            {obj[row.menuType].label}
          </el-tag>,
        ];
      },
    },
  },
  {
    field: "icon",
    title: "图标",
    slots: {
      default: ({ row }) => {
        return [
          <span>
            <Svg-icon icon-class={row.icon} size="25px"></Svg-icon>
          </span>,
        ];
      },
    },
  },
  {
    field: "orderNum",
    title: "排序",
  },
  {
    field: "status",
    title: "状态",
    slots: {
      default: ({ row }) => {
        return [
          <el-switch
            v-model={row.status}
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dcdfe694"
            active-value="0"
            inactive-value="1"
            onChange={() => {
              onChangeMenuType(row);
            }}
          ></el-switch>,
        ];
      },
    },
  },
  {
    field: "createTime",
    title: "创建时间",
  },
]);
const searchForm = reactive({});
const searchColumn = ref([
  {
    type: "label_input",
    label: t("菜单名称"),
    prop: "menuName",
  },
  {
    type: "label_select",
    label: t("菜单状态"),
    options: [
      {
        label: "启用",
        value: "0",
      },
      {
        label: "禁用",
        value: "1",
      },
    ],
    prop: "status",
  },
]);
const dialogVisible = ref(false);
const multipleSelection = ref([]);
const currRow = ref({});
const isType = ref("add");
onMounted(() => {
  onSearch();
});
const menuList = () => {
  loading.value = true;
  api.default.system.menu
    .list({
      type: 1,
      isParentRecursion: 1,
      parentId: 0,
      ...searchForm,
    })
    .then((res) => {
      loading.value = false;
      dataSource.value = res.data.map((item) => {
        return {
          ...item,
          hasChildren: true,
        };
      });
    })
    .catch(() => {
      loading.value = false;
    });
};
const loadMethod = ({ row }) => {
  return fetchChildListApi(row);
};

const fetchChildListApi = (row) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      api.default.system.menu.listByParentId(row.menuId).then((res) => {
        if (res.data.length == 0) {
          row.hasChildren = false;
        }
        const chid = res.data.map((item) => {
          return {
            ...item,
            hasChildren: item.menuType != "F",
          };
        });
        resolve(chid);
      }, 500);
    });
  });
};

const onAdd = () => {
  isType.value = "add";
  if (multipleSelection.value.length != 0) {
    currRow.value = multipleSelection.value[0];
  }
  dialogVisible.value = true;
};
const onEdit = () => {
  isType.value = "edit";
  currRow.value = multipleSelection.value[0];
  dialogVisible.value = true;
};
const onChangeMenuType = (row) => {
  api.default.system.menu.edit({ ...row }).then(() => {
    onSearch();
  });
};
const onDelete = () => {
  const data = multipleSelection.value[0];
  ElMessageBox.confirm(t("是否确定删除当前选择数据？"), t("提示"), {
    confirmButtonText: t("确定"),
    cancelButtonText: t("取消"),
    type: "warning",
  })
    .then(() => {
      api.default.system.menu.remove({ menuId: data.menuId }).then(() => {
        ElMessage.success(t("删除成功"));
        onSearch();
      });
    })
    .catch(() => {});
};
const handleSelectionChange = (list) => {
  multipleSelection.value = list;
};
const onSearch = () => {
  menuList();
};
</script>

<style lang="scss" scoped>
.pcMenu {
  height: 100%;
  width: 100%;
  background: #fff;
}
</style>